<template>
  <div class="userinfo">
    <div class="touxian">
      <span>头像</span>
      <div>
        <img
          :src="list.avatar"
          alt=""
          class="avatar"
        >
        <img
          :src="list.vipIcon"
          alt=""
          class="vipIcon"
        >
      </div>

    </div>
    <div class="touxian">
      <span>昵称</span>
      <span>{{list.nickname}}</span>
    </div>
    <div class="touxian">
      <span>手机号码</span>
      <span @click="tophoto(list.phone)">{{list.phone}} ></span>
    </div>
    <div class="touxian">
      <span>ID号</span>
      <span>1246
        <van-icon name="edit" />
      </span>
    </div>
    <div class="touxian">
      <span>密码</span>
      <span>点击修改密码 ></span>
    </div>
    <div class="button">
      <van-button
        type="info"
        @click="add"
      >保存修改</van-button>
      <van-button
        type="default"
        @click="app"
      >退出登录</van-button>
    </div>

  </div>
</template>
<script>
import axios from "axios"
import { Dialog } from 'vant';

export default {
  data() {
    return {
      list: [],
      authoriZation: localStorage.token,
    }
  },
  methods: {
    async getgrids(authoriZation) {
      await axios.get("https://api.java.crmeb.net/api/front/user", {
        headers: {
          "authori-zation": authoriZation
        }
      }).then(res => {


        this.list = res.data.data
        console.log(this.list);
      })
    },
    tophoto(phone){
      this.$router.push(`/user_photo?value=${phone}`)
    },
    add() {
      Dialog.alert({
        title: "√",
        message: '保存成功',
        closeOnClickOverlay: true,
        

      }) .then(() => {
          this.$router.push("/user")
        })
    


     
    },
    app() {
      Dialog.confirm({
        title: '提示',
        message: '确认退出登录',
      })
        .then(() => {
           this.$router.push("*")
        })
        .catch(() => {
          
        });
    }
  },
  created() {
    this.getgrids(this.authoriZation)
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.userinfo {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding-top: 10px;
  .touxian {
    width: 94%;
    height: 60px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin: auto;

    .avatar {
      width: 50px;
    }
    .vipIcon {
      width: 20px;
    }
  }
  .van-button {
    width: 94%;
    margin-left: 10px;
    border-radius: 30px;
  }

  .button {
    padding-top: 50px;
  }
}
</style>